<template>
  <view class="header-bar">
    <view class="location" @click="onLocationClick">
      <text class="location-icon">📍</text>
      <text>{{ location }}</text>
      <text class="arrow">↓</text>
    </view>
    <view class="search-box">
      <text class="search-icon">🔍</text>
      <input 
        type="text" 
        placeholder="搜索产品或服务" 
        @input="onSearchInput"
        @confirm="onSearchConfirm"
      />
    </view>
    <view class="cart-icon" @click="onCartClick">
      <text>🛒</text>
      <text class="cart-count">{{ cartCount }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    location: {
      type: String,
      default: '武汉'
    },
    cartCount: {
      type: Number,
      default: 0
    }
  },
  methods: {
    onLocationClick() {
      this.$emit('location-click')
    },
    onSearchInput(e) {
      this.$emit('search-input', e.detail.value)
    },
    onSearchConfirm(e) {
      this.$emit('search-confirm', e.detail.value)
    },
    onCartClick() {
      this.$emit('cart-click')
    }
  }
}
</script>

<style scoped>
.header-bar {
  display: flex;
  align-items: center;
  padding: 15px;
  background-color: #F8F8F8;
}

.location {
  display: flex;
  align-items: center;
  padding: 5px 10px;
  margin-right: 10px;
  border-radius: 20px;
  background-color: #FFF;
}

.location-icon {
  margin-right: 5px;
}

.arrow {
  margin-left: 5px;
  font-size: 12px;
  color: #999;
}

.search-box {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 5px 15px;
  border-radius: 25px;
  background-color: #FFF;
}

.search-icon {
  margin-right: 5px;
  color: #999;
}

input {
  flex: 1;
  font-size: 14px;
}

.cart-icon {
  position: relative;
  margin-left: 15px;
  padding: 5px;
}

.cart-count {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 16px;
  height: 16px;
  line-height: 16px;
  text-align: center;
  font-size: 10px;
  color: #FFF;
  background-color: #FF4500;
  border-radius: 50%;
}
</style>